<template>
    <div>
        <div  :height="searchheight">
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "收起" : "展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">
              <el-form-item label="">
                <el-checkbox-group v-model="dataForm.check">
                  <el-checkbox v-for="item in checkList" :key='item.jjxMc' :label="item.jjxMc">{{item.jjxMc}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
           </div>
        </div>
        <div style="float: right">
            <el-button type="primary" plain @click="saveZhibiaoData">保存</el-button>
            <el-button type="primary" plain @click="fnBackOldPage">关闭</el-button>
        </div>
        <div class="avue-crud">
            <el-table
                ref="batchtable"
                style="width: 100%;margin-top:20px"
                :data="dataList"
                border
                v-loading="dataListLoading">
                <el-table-column
                label="选择"
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column type="index" width="60" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column min-width="100" header-align="center" align="center" label="人员名称" prop="name"></el-table-column>
                <el-table-column  v-for="(item,index) in list" :key="index" align="center" :label="item.jjxMc">
                    <template slot="header" slot-scope="scope">
                        <span>{{ item.jjxMc }}</span>
                    </template>
                  <el-table-column prop="lx" label="类型" min-width="100" align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.id==dbclickRowId">
                        <el-select  :disabled="!scope.row['zbId'+(index+1)]"  v-model="scope.row['lx'+(index+1)]"  @change="fnChangeJine(scope.row['lx'+(index+1)],'lx'+(index+1),scope.$index,'zbId'+(index+1))">
                          <el-option label="奖励" value="奖励"></el-option>
                          <el-option label="惩罚" value="惩罚"></el-option>
                        </el-select>
                      </div>
                      <div v-else>{{scope.row.lx}}</div>
                    </template>
                  </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        min-width="160"
                        label="奖惩金额">
                        <template slot-scope="scope">
                            <!-- :disabled="!scope.row['zbId'+(index+1)]" -->
                        <el-input-number :disabled="!scope.row['zbId'+(index+1)]"  v-model="scope.row['jjJe'+(index+1)]"  placeholder="奖惩金额" @change="fnChangeJine(scope.row['jjJe'+(index+1)],'jjJe'+(index+1),scope.$index,'zbId'+(index+1))"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        min-width="140"
                        label="奖惩时间">
                        <template slot-scope="scope">
                        <el-date-picker :disabled="!scope.row['zbId'+(index+1)]" v-model="scope.row['jjDate'+(index+1)]" placeholder="奖惩时间" style="width:100%;" type="datetime"
                                    :picker-options="expireTimeOption" value-format="yyyy-MM-dd HH:mm:ss"@change="fnChangeJine(scope.row['jjDate'+(index+1)],'jjDate'+(index+1),scope.$index,'zbId'+(index+1))"></el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column prop="jjSm" label="奖惩说明" show-overflow-tooltip min-width="150"align="center">
                    <template slot-scope="scope">
                        <el-input :disabled="!scope.row['zbId'+(index+1)]" v-model="scope.row['jjSm'+(index+1)]" placeholder="奖惩说明" :rows="2" type="textarea" style="width:100%;"@change="fnChangeJine(scope.row['jjSm'+(index+1)],'jjSm'+(index+1),scope.$index,'zbId'+(index+1))" show-word-limit maxlength="250"></el-input>
                    </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
import {
  getJjxData,
  getGrjcjlbData,
  saveGrjcjlbData
} from '@/api/jiangjin/jiangjingrjcjlb'
export default {
    data(){
        return{
            expireTimeOption: {
                disabledDate(date) {
                //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                return (
                    date.getTime() < new Date(new Date().getFullYear(), 0, 1).getTime() ||
                    date.getTime() > new Date(new Date().getFullYear(), 11, 31).getTime()
                );
                }
            },
            searchheight:0,
            searchadvanced: true,
            dataForm:{
                check:[]
            },
            checkList:[],
            dataList:[],
            dataListLoading:false,
            list:[],
            idArray:'',
        }
    },
    watch:{
        "dataForm.check"(newValue,oldValue){
        if(newValue.length>0){
            this.idArray = ''
            newValue.forEach(ele=>{
                this.idArray = this.idArray + ele+',';
            })
            this.list = this.checkList.filter(x=>{
            return newValue.some(y=>{
                return x.jjxMc==y;
            })
            })
            this.getDataList();
        }
        if(newValue.length == 0){
            this.list = [];
            this.dataList = [];
        //console.log(oldValue)
        }
        }
    },
    methods:{
        init(ids){
            var params={
                jjIds:ids.toString()
            }
            this.list=[];
            this.dataList=[];
            this.dataForm.check=[]
            getJjxData(params).then(res=>{
                this.checkList=res.data.data
            })
        },
        //修改奖惩金额
        fnChangeJine(val,prop,index,isEdit){
            var selectedData=this.$refs.batchtable.selection;
            //console.log(selectedData)
            if(selectedData.length>0){
                selectedData.forEach(item=>{
                if(item[isEdit]){
                    item[prop]=val;
                }
                })

            }
            this.saveZhibiaoData()
        },
        saveZhibiaoData(){
            saveGrjcjlbData(this.dataList).then(response => {
                this.$message.closeAll();
                this.$message.success('保存成功');
                this.getDataList()
            })
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        fnBackOldPage(){
            this.$emit('batchChild')
        },
        getDataList(){
            var params={
                jjxMc:this.idArray
            }
            getGrjcjlbData(params).then(res=>{
                console.log(JSON.stringify(res))
                this.dataList=res.data.data
            })
        },
    }
}
</script>

<style>

</style>
